<template>
  <div>
    <h1>共享状态 传值</h1>
    <!-- vue3脚手架中给出的公共传值的方式pinia -->
    <h1>{{ count }}</h1>
    <h1>{{ oddOrEven }}</h1>
    <button @click="add">加法</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import { useCounter } from "@/store/index";
import { storeToRefs } from "pinia";

export default defineComponent({
  setup() {
    console.log(useCounter());
    const store = useCounter();
    console.log(store);
    // 按照对象的格式 一层层往下找 count oddOrEven 可以

    // pinia提供了一个方法storeToRefs 可以直接解构出state和getters当中的数据
    const { count, oddOrEven } = storeToRefs(store);
    console.log(count, oddOrEven);

    // 大伙理解一下这一步
    // actions当中的方法可以直接解构赋值
    const { add } = store;
    return {
      count,
      oddOrEven,
      add,
    };
  },
});

/* 
pinia使用步骤
下载
npm i -S pinia
如果报错，我刚才的那个错误 
npm i -S pinia --legacy-peer-deps






*/
</script>

<style scoped>
</style>